<template>
  <el-card>
    <el-form ref="addForm" label-width="100px" :model="cateData" :rules="rules">
      <el-form-item prop="pid" label="上级分类" required>
        <el-select placeholder="请选择" v-model="cateData.pid">
            <el-option label="一级分类" :value="0"></el-option>

          <el-option
            v-for="item in cateList"
            :key="item.id"
            :label="item.catename"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="catename" label="分类名称" required>
        <el-input placeholder="请输入分类名称" v-model="cateData.catename"></el-input>
      </el-form-item>
      <el-form-item prop="img" label="分类图片" v-if="cateData.pid!==0">
        <!-- 
              action: 图片上传的地址
              list-type: 约定图片展示方式
              on-preview: 图片预览相关的处理方法
              on-remove: 图片移除处理方法
              auto-upload: 是否自动上传
              limit: 限制上传图片的数量
              on-exceed: 文件数量超出限制的回调函数
        -->
        <el-upload
          :limit="1"
          action="#"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :auto-upload="false"
          :on-change="fileChange"
          :on-exceed="limitTips"
          :file-list="imgList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </el-form-item>
      <el-form-item prop="status" label="状态" required>
        <el-radio-group v-model="cateData.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">立即重置</el-button>
      
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { getCateList ,getCateById} from "../../request/category";
export default {
  data() {
    return {
      cateList: [],
      cateData: {
        pid: "",
        catename: "",
        status: 1
      },
      imgList:[],
      rules: {
        pid: { required: true, message: "请选择上级分类" },
        catename: { required: true, message: "请选输入分类名称" },
        status: { required: true, message: "请选择状态" }
      },
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  methods: {
    limitTips() {
      this.$error("此处最多只能上传一张图片");
    },
    fileChange(file) {
      this.cateData.img = file.raw;
    },
    submitForm() {
      this.$refs.addForm.validate(async valid => {
        if (valid) {
          const fd = new FormData();
          for (let key in this.cateData) {
            fd.append(key, this.cateData[key]);
          }
          fd.append('id',this.$route.params.id)
          const res = await this.$http.post("/api/cateedit", fd);
          if (res.code === 200) {
            this.$success(res.msg);
            return this.$router.push("/category");
          }
          this.$success(res.msg);
        } else {
          console.log("表单校验未通过");
        }
      });
    },
    resetForm() {
      this.$refs.addForm.resetFields();
    },
    async gerCateList(){
      const list=await getCateList()
      if(list){
        this.cateList=list
      }

    },
    async getCateById(){
        const info=await getCateById(this.cateData.id)
        if(info){
            // console.log(info)
            this.cateData=info
            this.imgList=info.img===''?[]:[{url:this.$imgBaseURL+info.img}]
        }

    },
    // 获取分类列表
    async getCateList() {
      const list = await getCateList();
      if (list) {
        this.cateList = list;
      }
    },
    // 和图片上传相关的方法
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  },
  created() {
    this.getCateList();
    this.cateData.id=this.$route.params.id
    this.getCateById()
  }
};
</script>

<style lang="less" scoped>
.el-form {
  width: 600px;
  margin: auto;
}
</style>